<template>
  <el-main>
    <div style="text-align: left">
      <span>宿舍管理系统</span>
      <br />
      <span>宿舍编号:</span>
      <input placeholder="宿舍编号" />
      <span>宿舍名称:</span>
      <input placeholder="宿舍名称" />
      <span>管理员:</span>
      <input placeholder="管理员" />

      <!--登陆-->
      <el-button type="info" icon="el-icon-search">查询</el-button>
      <!--登陆-->
      <el-button type="success" icon="el-icon-edit" @click="dialogVisible = true">添加</el-button>

      <!--添加模态框-->
      <el-dialog title="新增宿舍信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
              <span>新增宿舍信息</span>
              <br />
              <div class="addinput">
                <el-input placeholder="区域" v-model="addarea" style="width: 300px"></el-input>
                <el-input placeholder="楼号" v-model="addbuildingNo" style="width: 300px"></el-input>
                <el-input placeholder="楼层" v-model="addbuildingFloor" style="width: 300px"></el-input>
                <el-input placeholder="宿舍名称" v-model="adddormitoryName" style="width: 300px"></el-input>
                <el-input placeholder="床位数量" v-model="addbedNumber" style="width: 300px"></el-input>
                <el-input placeholder="管理员" v-model="adddormSupervisor" style="width: 300px"></el-input>
                <el-select v-model="adduseStatus" placeholder="使用状态">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save(), (dialogVisible = false)">确 定</el-button>
              </span>
      </el-dialog>

      <!--修改模态框-->
      <el-dialog title="修改宿舍信息" :visible.sync="updialogVisible" width="30%" :before-close="handleClose">
              <span>修改宿舍信息</span>
              <br />
              <div class="addinput">
                <el-input placeholder="区域" v-model="uparea" style="width: 300px"></el-input>
                <el-input placeholder="楼号" v-model="upbuildingNo" style="width: 300px"></el-input>
                <el-input placeholder="楼层" v-model="upbuildingFloor" style="width: 300px"></el-input>
                <el-input placeholder="宿舍名称" v-model="updormitoryName" style="width: 300px"></el-input>
                <el-input placeholder="床位数量" v-model="upbedNumber" style="width: 300px"></el-input>
                <el-input placeholder="管理员" v-model="updormSupervisor" style="width: 300px"></el-input>
                <el-select v-model="upuseStatus" placeholder="使用状态">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="updialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="update(), (updialogVisible = false)">确 定</el-button>
              </span>
      </el-dialog>
    </div>
    <el-table :data="tableData">
      <el-table-column prop="area" label="区域" width="140"> </el-table-column>
      <el-table-column prop="buildingNo" label="楼号" width="120">
      </el-table-column>
      <el-table-column prop="buildingFloor" label="楼层" width="140">
      </el-table-column>
      <el-table-column prop="dormitoryName" label="宿舍名称" width="140">
      </el-table-column>
      <el-table-column prop="bedNumber" label="床位数量" width="140">
      </el-table-column>
      <el-table-column prop="dormSupervisor" label="管理员" width="140">
      </el-table-column>
      <template slot-scope=""><!-- 性别FM -->
        <el-table-column label="使用状态" width="180">
          <template slot-scope="scope">
            <span v-html="useStatus1(scope.row.useStatus)"></span>
          </template>
        </el-table-column>
      </template>
      <template slot-scope="">
            <el-table-column label="开始时间" width="300">
              <template slot-scope="scope">
                <span v-html="getYMDHMS(scope.row.createTime)"></span>
              </template>
            </el-table-column>
      </template>
      <template slot-scope="">
            <el-table-column label="结束时间" width="300">
              <template slot-scope="scope">
                <span v-html="getYMDHMS(scope.row.updateTime)"></span>
              </template>
            </el-table-column>
      </template>

      <el-table-column label="操作">
              <template slot-scope="scope">
                <!--修改按钮-->
                <el-button type="text" @click="find(scope.row.pkId),(updialogVisible = true)">修改</el-button>
                <!--删除按钮-->
                <el-button size="mini" type="danger"  @click="del(scope.row.pkId)">删除</el-button>

              </template>
      </el-table-column>
    </el-table>
  </el-main>
</template>

<script>
export default {
  name: "Dormitory",
  created: function () {
    this.select();
  },
  data() {
    return {
      tableData: [],
      options: [
        {
          value: "0",
          label: "正常",
        },
        {
          value: "1",
          label: "空闲",
        },
        {
          value: "2",
          label: "停用",
        },
        {
          value: "3",
          label: "保留",
        },
      ],
      dialogVisible : false,
      addarea : "",
      addbuildingNo : "",
      addbuildingFloor : "",
      adddormitoryName : "",
      addbedNumber : "",
      adddormSupervisor : "",
      adduseStatus : "",

      updialogVisible : false,
      uparea : "",
      upbuildingNo : "",
      upbuildingFloor : "",
      updormitoryName : "",
      upbedNumber : "",
      updormSupervisor : "",
      upuseStatus : "",
    };
  },
  props: {},
  methods: {
    //状态转换
    useStatus1(useStatus) {
      if (useStatus == "0") {
        return "正常";
      } else if (useStatus == "1") {
        return "空闲";
      }else if (useStatus == "2") {
        return "停用";
      }else if (useStatus == "3") {
        return "保留";
      }

    },
    select: function () {
      var that = this;
      this.$axios.post("/ss/questData", {
        
      })
        .then(function (response) {
          console.log(response);
          that.tableData = response.data.data;
        })
        .catch(function (error) {});
    },
    save : function(){
      var that = this;
      this.$axios.post("/ss/save",{
        area : that.addarea,
        buildingNo : that.addbuildingNo,
        buildingFloor : that.addbuildingFloor,
        dormitoryName : that.adddormitoryName,
        bedNumber : that.addbedNumber,
        dormSupervisor : that.adddormSupervisor,
        useStatus : that.adduseStatus,
      })
      .then(function(){
        that.select(),
            that.$message({
              //弹出框
              message: "新增成功!",
              type: "success",
          });
      })
    },
    del : function(pkId){
      var that = this;
      this.$axios.post("/ss/del",{
        pkId : pkId,
      }).then(function(){
        that.select(),
            that.$message({
              //弹出框
              message: "删除成功!",
              type: "success",
          });
      })
    },
    find : function(pkId){
      var that = this;
      this.$axios.post("/ss/findPkId",{
        pkId : pkId,
      }).then(function(response){
        if (response.data.code == "33333") {
          that.uparea = response.data.data.area;
          that.upbuildingNo = response.data.data.buildingNo;
          that.upbuildingFloor = response.data.data.buildingFloor;
          that.updormitoryName = response.data.data.dormitoryName;
          that.upbedNumber = response.data.data.bedNumber;
          that.updormSupervisor = response.data.data.dormSupervisor;
          that.upuseStatus = response.data.data.useStatus;
          that.pkId = response.data.data.pkId;
          } else {
            //alert("修改失败");
          }
      })
    },
    update : function(){
      var that = this;
      this.$axios.post("/ss/update",{
        area : that.uparea,
        buildingNo : that.upbuildingNo,
        buildingFloor : that.upbuildingFloor,
        dormitoryName : that.updormitoryName,
        bedNumber : that.upbedNumber,
        dormSupervisor : that.updormSupervisor,
        useStatus : that.upuseStatus,
        pkId : that.pkId,
      }).then(function(){
        that.select();
      })
    },
    getYMDHMS: function (timestamp) {
            let time = new Date(timestamp);
            let year = time.getFullYear();
            let month = time.getMonth() + 1;
            let date = time.getDate();
            let hours = time.getHours();
            let minute = time.getMinutes();
            let second = time.getSeconds();

            if (month < 10) {
                month = "0" + month;
            }
            if (date < 10) {
                date = "0" + date;
            }
            if (hours < 10) {
                hours = "0" + hours;
            }
            if (minute < 10) {
                minute = "0" + minute;
            }
            if (second < 10) {
                second = "0" + second;
            }
            return year + "-" + month + "-" + date + " " + hours + ":" + minute + ":" + second;
        },
  },
};
</script>

<style scoped></style>